<!--
// TODO 拆分订单详情Modal，【财务管理-平账管理】内也需使用该Modal
-->
<template>
  <div>
    <Modal
      v-model="modal11"
      :title="this.$t('m.dìngdānfāhuíxiángqíngyè')"
      @on-ok="handleBatchWithholdOk"
      @on-cancel="handleBatchWithholdOk"
    >
      <table class="table table-hover table-condensed" border>
        <!-- <thead>
        </thead>-->
        <tbody>
          <tr v-show="orderGidReturnObj.editTotalNumbers">
            <td>{{ $t('m.fāhuízǒngtiáoshù') }}</td>
            <td>{{orderGidReturnObj.editTotalNumbers}}</td>
          </tr>
          <tr v-show="orderGidReturnObj.succTotalNumbers">
            <td>{{ $t('m.fāhuíchénggōngtiáoshù') }}</td>
            <td>{{orderGidReturnObj.succTotalNumbers}}</td>
          </tr>
          <tr v-show="orderGidReturnObj.failTotalNumbers">
            <td>{{ $t('m.fāhuíshībàitiáoshù') }}</td>
            <td>{{orderGidReturnObj.failTotalNumbers}}</td>
          </tr>
        </tbody>
      </table>
    </Modal>
    <Modal
      :value="visible"
      :title="this.$t('m.oDetails')"
      width="1000"
      :footer-hide="true"
      @on-cancel="onCancel"
      class-name="orderDetailModal"
    >
      <div slot="header" class="detailsVisible_Close" v-if="detailPayment.paymentStatus=='payFail'">
        <h3>{{this.$t('m.oDetails')}}</h3>
        <!-- <Button
          type="warning"
          @click="detailsVisibleReturn(detailPayment.orderGid)"
        >{{this.$t('m.guānbìfāhuí')}}</Button> -->
      </div>
      <div class="detailPayment">
        <h2>{{this.$t('m.orderGidInfo')}}</h2>
        <ul class="paymentUl">
          <li>
            <em>{{ $t('m.orderGid') }}：</em>
            <span>{{detailPayment.orderGid}}</span>
          </li>
          <li>
            <em>{{this.$t('m.sptime')}}：</em>
            <span>{{detailPayment.dueDate}}</span>
          </li>
          <li>
            <em>{{this.$t('m.userName')}}：</em>
            <span>{{detailPayment.fullName}}</span>
          </li>
          <li>
            <em>{{this.$t('m.phone')}}：</em>
            <span>{{detailPayment.phone}}</span>
          </li>
          <li>
            <em>{{this.$t('m.jiekuanfangshi')}}：</em>
            <span>{{detailPayment.payChannelName}}</span>
          </li>
          <li>
            <em>{{this.$t('m.diànzǐqiánbāozhànghào')}}：</em>
            <span
              v-if="detailPayment.payChannelId == '6' || detailPayment.payChannelId == '7'"
            > <i v-if="detailPayment.accountNo"> {{detailPayment.accountNo}}</i></span>
          </li>
          <li>
            <em>{{this.$t('m.BcardN')}}：</em>
            <span v-if="detailPayment.payChannelId == '5' || detailPayment.payChannelId == '66'"> <i v-if="detailPayment.accountNo">{{detailPayment.accountNo}}</i></span>
          </li>
          <li>
            <em>{{this.$t('m.Bname')}}：</em>
            <span>{{detailPayment.bankName}}</span>
          </li>
          <li>
            <em>{{this.$t('m.loanMount')}}：</em>
            <span>{{formatTreeMount(detailPayment.loanAmount || 0)}}</span>
          </li>
          <li>
            <em>{{this.$t('m.loanTimeLimit')}}：</em>
            <span v-if="detailPayment.loanDays">{{detailPayment.loanDays}}day</span>
          </li>
          <li>
            <em>{{this.$t('m.moneyrate')}}：</em>
            <span>{{formatTreeMount(detailPayment.interest || 0)}}</span>
          </li>
          <li>
            <em>{{this.$t('m.Firstinstance')}}：</em>
            <span>{{detailPayment.checkerFirst}}</span>
          </li>
          <li>
            <em>{{this.$t('m.Finalreviewer')}}：</em>
            <span>{{detailPayment.checkerFinal}}</span>
          </li>
        </ul>

        <h2>{{this.$t('m.tranState')}}</h2>
        <ul class="paymentUl">
          <li>
            <em>{{this.$t('m.rLt')}}：</em>
            <span>{{detailPayment.timePay}}</span>
          </li>
          <li>
            <em>{{this.$t('m.TransferStatus')}}：</em>
            <span>{{loadStateArr[detailPayment.paymentStatus]}}</span>
            <span
              style="color:red;margin-left:20px;"
              v-show="detailPayment.paymentStatus=='payFail'"
            >({{this.$t('m.shībàiysuányīn')}}:{{detailPayment.payChannelReMess}})</span>
          </li>
        </ul>

        <h2>{{this.$t('m.bill')}}</h2>
        <ul class="paymentUl">
          <li>
            <em>{{this.$t('m.repayMuch')}}：</em>
            <span>{{ formatTreeMount(detailPayment.toBeRepaidAmount || 0) }}</span>
          </li>
          <li>
            <em>{{this.$t('m.jiǎnmiǎnjīné')}}：</em>
            <span>{{ formatTreeMount(detailPayment.reductionAmount || 0) }}</span>
          </li>
          <li>
            <em>{{this.$t('m.alreadyPM')}}：</em>
            <span>{{ formatTreeMount(detailPayment.repaidAmount || 0) }}</span>
          </li>
          <li>
            <em>{{this.$t('m.awaitPM')}}：</em>
            <span>{{ formatTreeMount(detailPayment.remainingRepaidAmount || 0) }}</span>
          </li>
          <li>
            <em>{{this.$t('m.repayCreat')}}：</em>
            <span>{{ repaymentStatusArray[detailPayment.repaymentStatus] }}</span>
          </li>
          <li>
            <em>{{this.$t('m.ClosingTime')}}：</em>
            <span>{{ detailPayment.timeRepay }}</span>
          </li>
          <li>
            <em>{{this.$t('m.ynOverdue')}}：</em>
            <span>{{ detailPayment.overDueDays == 0 ? this.$t('m.overdueState0') : this.$t('m.overdueState1')}}</span>
          </li>
          <li>
            <em>{{this.$t('m.overdueDay')}}：</em>
            <span>{{ detailPayment.overDueDays }}</span>
          </li>
          <li>
            <em>{{this.$t('m.penaltyRate')}}：</em>
            <span>{{ formatTreeMount(detailPayment.interestFine || 0) }}</span>
          </li>
        </ul>

        <h2>{{this.$t('m.information')}}</h2>
        <ul class="paymentUl" v-if="countryName=='VN'">
          <li>
            <em>{{this.$t('m.funpaynumber')}}：</em>
            <span v-if="detailPayment.userVirtualCardVo" >{{ detailPayment.userVirtualCardVo.accountNo }}</span>
          </li>
          <li>
            <em>{{this.$t('m.bankName')}}：</em>
            <span v-if="detailPayment.userVirtualCardVo" >{{ detailPayment.userVirtualCardVo.bankName }}</span>
          </li>
          <li>
            <em>{{this.$t('m.branchBankName')}}：</em>
            <span v-if="detailPayment.userVirtualCardVo" >{{ detailPayment.userVirtualCardVo.branchBankName }}</span>
          </li>
        </ul>
        <ul class="paymentUl" v-if="countryName=='PHH'">
          <li>
            <em>{{this.$t('m.Skypayhuánkuǎnmǎ')}}：</em>
            <span >{{ detailPayment.repayCode }}</span>
          </li>
        </ul>

        <h2>{{this.$t('m.payRecord')}}</h2>
        <div class="paymentUl">
          <Table ref="rtable" border :data="rdata" :columns="rcolumns" :loading="rloading"></Table>
        </div>
      </div>
    </Modal>
    <Modal
      :title="this.$t('m.chákànpíngzhèng')"
      class="proofimg-modal"
      width="390"
      :class="{ 'preview_img': previewImg }"
      v-model="previewProofImgs"
      @on-cancel="handleProofImgsCancel"
    >
      <template v-if="proofImgsArr.length > 0">
        <div v-for="(item, index) in proofImgsArr" :key="index">
          <p class="proofimg-labels" v-if="proofImgsArr.length > 1">
            <span class="proofimg-label">{{ index + 1 }}</span>
          </p>
          <img id="proofimg-pic" :src="item" style="width:100%; height:100%; display: block;">
          <Divider v-if="proofImgsArr.length !== (index+1)"/>
        </div>
        <button id="button" @click="mmm">{{$t('m.xuánzhuǎn')}}</button>
        <button id="button" @click="isPreviewImg" v-if="previewImg">{{$t('m.suōxiǎo')}}</button>
        <button id="button" @click="isPreviewImg" v-else>{{$t('m.fàngdà')}}</button>
      </template>
      <template v-else>
        <p class="no-img">{{$t('m.zànwútúpiàn')}}</p>
      </template>
    </Modal>
  </div>
</template>

<script>
export default {
  props: {
    detailPayment: {
      // type: Object,
      // default: { }
    },
    visible: {
      type: Boolean,
      default: false
    },
    rdata: {
      type: Array,
      default: []
    },
    rloading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      //  预览图片
      // userVirtualCardVos:this.detailPayment.userVirtualCardVo,
      previewProofImgs: false,
      proofImgsArr: [],
      previewImg: false,
      deg: 0,      
      countryName:'',
      //  打回
      modal11: false,
      orderGidReturnObj: "",
      detailsVisible: false,
      repaymentStatusArray: {
        repayNo: this.$t("m.wèihuánkuǎn"),
        preRepaid: this.$t("m.bùfènjiéqīng"),
        repaid: this.$t("m.yǐjiéqīng")
      },
      loadStateArr: {
        paying: this.$t("m.paying"),
        paySuccess: this.$t("m.dǎkuǎnchénggōng"),
        payFail: this.$t("m.dǎkuǎnshībài"),
        payCancel: this.$t("m.guānbìdǎkuǎn")
      },
      rcolumns: [
        {
          title: this.$t("m.repayTime"),
          key: "timePay",
          align: "center",
          render: (h, params) => {
            return h(
              "span",
              params.row.timePay == "" ? params.row.utime : params.row.timePay
            );
          }
        },
        {
          title: this.$t("m.huánkuǎnhàomǎ"),
          key: "accountNo",
          align: "center"
        },
        {
          title: this.$t("m.repayMuch"),
          key: "payAmount",
          align: "center",
          render: (h, param) => {
            return h('div', this.formatTreeMount(param.row.payAmount || 0));
          }
        },
        {
          title: this.$t("m.repayClu"),
          key: "payChannelName",
          align: "center",
          render: (h, params) => {
            const { payChannelName, repayIsAuto } = params.row;
            let text;
            if (repayIsAuto == 0) {
              text = payChannelName + "   (" + this.$t("m.shǒudòng") + ")";
            } else {
              text = payChannelName;
            }

            return h("span", text);
          }
        },
        {
          title: this.$t("m.repayCreat"),
          key: "status",
          align: "center",
          render: (h, params) => {
            const { status } = params.row;
            let text;

            if (status == "S") {
              text = this.$t("m.chénggōng");
            } else if (status == "P") {
              text = this.$t("m.jìnxíngzhōng");
            } else if (status == "F") {
              text = this.$t("m.shībài");
            } else if (status == "C") {
              text = this.$t("m.cancel");
            }
            return h("span", text);
          }
        },
        {
          title: this.$t("m.repayRemark"),
          key: "remark",
          align: "center"
          // render: (h, params) => {
          // 	const { remark, isExtend } = params.row;
          // 	return h('p', isExtend == 1 ? `【展期】${remark}` : remark)
          // }
        },
        {
          title: this.$t("m.repayCre"),
          key: "payEvidenceUrl",
          align: "center",
          render: (h, params) => {
            const { payEvidenceUrl } = params.row;
            let isHide =
              payEvidenceUrl == "" ||
              payEvidenceUrl == null ||
              payEvidenceUrl == undefined;
            let ispayEvidenceUrl =
              isHide == true ? this.$t("m.wúpíngzhèng") : this.$t("m.chákàn");

            if (isHide) {
              return h("span", ispayEvidenceUrl);
            } else {
              return h(
                "div",
                {
                  style: {
                    paddingTop: "5px",
                    paddingBottom: "5px"
                  }
                },
                [
                  h(
                    "Button",
                    {
                      props: {
                        type: "primary"
                      },
                      style: {
                        marginRight: "10px",
                        display: isHide ? "none" : "inline-block"
                      },
                      on: {
                        click: () => {
                          this.handlePreviewRecordImage(payEvidenceUrl);
                        }
                      }
                    },
                    ispayEvidenceUrl
                  )
                ]
              );
            }
          }
        }
      ]
    };
  },
  methods: {
    mmm() {
      this.deg = this.deg + 90;
      document.getElementById("proofimg-pic").style.transform =
        "rotate(" + this.deg + "deg)";
    },
    isPreviewImg() {
      this.previewImg = !this.previewImg;
    },
    // 订单详情 预览弹窗 取消回调
    handleProofImgsCancel() {
      this.previewProofImgs = false;
      this.proofImgsArr = [];
    },
    handleBatchWithholdOk() {
      this.$emit("onCancel", true);
      this.detailsVisible = false;
      this.orderGidReturnObj = "";
    },
    onCancel() {
      this.$emit("onCancel", false);
    },
    detailsVisibleReturn(v) {
      this.$http
        .post("/api/laocai/order/callback", {
          orderGids: [v]
        })
        .then(res => {
          this.modal11 = true;
          if (res.body.code == 0) {
            if (res.body.result) {
              this.orderGidReturnObj = res.body.result;
            }
            this.$emit("onCancel", true);
          } else {
            this.$Message.warning(this.$t("m.errorCode" + res.body.code));
          }
        });
    },
    handlePreviewRecordImage(value) {
      this.proofImgsArr = value.split(";");
      this.previewProofImgs = true;
    }
  },
  created () {
    this.countryName = localStorage.getItem("x-countryName")
  },
};
</script>

<style lang="scss">
.orderDetailModal {
  h2 {
    font-size: 18px;
  }
}
.proofimg-modal {
  .no-img {
    text-align: center;
  }
  .proofimg-labels {
    margin-bottom: 5px;
    text-align: center;
  }
  .proofimg-label {
    display: inline-block;
    font-size: 14px;
    width: 24px;
    height: 24px;
    line-height: 24px;
    color: #fff;
    background: #2d8cf0;
    border-radius: 100%;
    text-align: center;
  }
  #proofimg-pic {
    width: 70%;
    margin: auto;
  }

  .proofimg-pic {
    display: block;
    width: 90%;
    margin: 0 auto;
  }
  .ivu-modal-wrap {
    .ivu-modal {
      .ivu-modal-body {
        overflow: hidden;
      }
    }
  }
}
</style>
